<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
	<head>
		<title>Naturex website for Iphone, Android, Smartphone Mobile Website Template | Home :: w3layouts</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<link href="smartphone/css/style.css" rel="stylesheet" type="text/css"  media="all" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
		<link href="smartphone/css/camera.css" rel="stylesheet" type="text/css" media="all" />
		<script src="smartphone/js/jquery.js"></script>
		<script type="text/javascript" src="smartphone/js/move-top.js"></script>
		<script type="text/javascript" src="smartphone/js/easing.js"></script>
		<script>
		jQuery(function(){
			jQuery('#camera_wrap_1').camera({
				height: '170',
				pagination: false,
				thumbnails: false,
				imagePath: '../images/'
			});

		});
	</script>
	<script src="smartphone/js/mobile.js"></script>
		<script>
		$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});
	</script>
	</head>
	<body>
		<!---start-wrap---->
		<div class="wrap">
			<!---start-sidebar---->
			<div id="w3-universal-nav">
    	<ul id="header" id="top">
    		<a href="index.html"><img src="smartphone/images/logo.png" alt=""/></a>
    	</ul>
				<div class="clear"></div>
    	<div id="w3-mobile-options">
    		<li id="w3-menu-trigger">
    			<li id="w3-search-trigger">
    				<a href="#">Search</a>
    			</li>
    	</div>
    	<ul id="w3-menu-links" style="display: none;">
    	</ul>
    	<div id="w3-search-module" style="display: none;">
    		<form id="w3-search-form" action="/Search/" method="get">
    			<p>
    				<label for="q">
    					<span class="w3-access">Search</span>
    				</label>
    				<input accesskey="s" type="text" maxlength="100" value="" name="q" id="q"><input type="hidden" value="17" name="v">
    			</p>
    		</form>
    		</div>
    		</div>
</div>
<!-- The menu -->
  <nav class="clearfix">
					<ul>
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="gallery.html">Gallery</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
		<a href="#" id="pull">Menu</a>
	</nav>
	<div class="clear"> </div>
			<!---start-image-slider---->
			 <div class="slider">
			 	<div class="wrap">
			<div class="fluid_container">
		        <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
		            <div data-thumb="smartphone/images/slider3.jpg" data-src="smartphone/images/slider3.jpg">
		            </div>
		           <div data-thumb="smartphone/images/slider1.jpg" data-src="smartphone/images/slider1.jpg">
		            </div>
		             <div data-thumb="smartphone/images/slider2.jpg" data-src="smartphone/images/slider2.jpg">
		            </div>
		             <div data-thumb="smartphone/images/slider3.jpg" data-src="smartphone/images/slider3.jpg">
		            </div>
		            <div data-thumb="smartphone/images/slider1.jpg" data-src="smartphone/images/slider1.jpg">
		            </div>
		            <div data-thumb="smartphone/images/slider1.jpg" data-src="smartphone/images/slider1.jpg">
		            </div>
		        </div><!-- #camera_wrap_1 -->
		        <script type='text/javascript' src='js/jquery.min.js'></script>
			    <script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script>
			    <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> 
			    <script type='text/javascript' src='js/camera.min.js'></script> 
				</div>
       			<div class="clear"> </div>
       			<div class="shadow">
       				<img src="smartphone/images/shadow.png" alt="" />
       			</div>
			<!---End-image-slider---->
			</div>
			<!---start-content----->
			<div class="content">
				<!---start-top-grids----->
				<div class="top-grids">
					<div class="wrap">
						<div class="top-grid top-grid1">
							<a class="icon01" href="#"> </a>
							<h2><span>Our</span>TRAINING</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
						</div>
						<div class="top-grid top-grid2">
							<a class="icon02" href="#"> </a>
							<h2><span>Our</span>Medicals</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
						</div>
						<div class="top-grid last-grid">
							<a class="icon03" href="#"> </a>
							<h2><span>Our</span>Specials</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
						</div>
						<div class="clear"> </div>
					</div>
				</div>
				<!---End-top-grids----->
				<!---start-mid-grids----->
				<div class="mid-grids">
					<div class="wrap">
					<div class="mid-grids-head">
						<div class="mid-grids-head-left">
							<h4><span>Our</span> Gallery</h4>
						</div>
						<div class=="clear"> </div>
					</div>
					<div class="mid-grid1 last-grid">
						<div class="mid-grid effect">
							<img src="smartphone/images/g1.jpg" />
					        <div class="mask">
								<a href="#" class="info">Read More</a>
							</div>
						</div>
					</div>
					<div class="mid-grid1 last-grid">
						<div class="mid-grid effect">
							<img src="smartphone/images/g2.jpg" />
					        <div class="mask">
								<a href="#" class="info">Read More</a>
							</div>
						</div>
					</div>
					<div class="mid-grid1 last-grid">
						<div class="mid-grid effect">
							<img src="smartphone/images/g3.jpg" />
					        <div class="mask">
								<a href="#" class="info">Read More</a>
							</div>
						</div>
					</div>
					<div class="mid-grid1 last-grid">
						<div class="mid-grid effect">
							<img src="smartphone/images/g4.jpg" />
					        <div class="mask">
								<a href="#" class="info">Read More</a>
							</div>
						</div>
					</div>
					<div class="mid-grid1 last-grid">
						<div class="mid-grid effect">
							<img src="smartphone/images/g5.jpg" />
					        <div class="mask">
								<a href="#" class="info">Read More</a>
							</div>
						</div>
					</div>
					<div class="mid-grid1 last-grid1">
						<div class="mid-grid effect">
							<img src="smartphone/images/g6.jpg" />
					        <div class="mask">
								<a href="#" class="info">Read More</a>
							</div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				</div>
				<!---End-mid-grids----->
				<!---start-bottom-grids----->
				<div class="bottom-grids">
					<div class="wrap">
					<div class="mid-grids-head">
						<div class="mid-grids-head-left">
							<h4><span>Our</span> Latest-news</h4>
						</div>
						<div class="=&quot;clear&quot;"> </div>
					</div>
					<div class="bottom-grid-left">
						<div class="bottom-grid-left-grid">
							<div class="bottom-grid-left-grid-pic">
								<img src="smartphone/images/06.jpg" alt="">
							</div>
							<div class="bottom-grid-left-grid-info">
								<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</h3>
								<ul class="in-list">
									<li><a href="#">May 3rd, 2013 |</a></li>
									<li><a href="#">1 Comment</a></li>
								</ul>
								<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<a href="#">[...]</a></p>
							</div>
							<div class="clear"> </div>
						</div>
						<div class="bottom-grid-left-grid">
							<div class="bottom-grid-left-grid-pic">
								<img src="smartphone/images/07.jpg" alt="">
							</div>
							<div class="bottom-grid-left-grid-info">
								<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</h3>
								<ul class="in-list">
									<li><a href="#">May 3rd, 2013 |</a></li>
									<li><a href="#">1 Comment</a></li>
								</ul>
								<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<a href="#">[...]</a></p>
							</div>
							<div class="clear"> </div>
						</div>
						<a class="all" href="#">View all</a>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
				<!---End-bottom-grids----->
			</div>
			<!---End-content----->
		</div>
		</div>
		<!---start-footer----->
		<div class="footer">
			<div class="wrap">
				<div class="footer-right">
					<div class="top-social-icons">
					<ul>
						<li><a class="icon1" href="#"> </a></li>
						<li><a class="icon2" href="#"> </a></li>
						<li><a class="icon3" href="#"> </a></li>
						<li><a class="icon4" href="#"> </a></li>
					</ul>
				</div>
					<p>Design by <a href="http://w3layouts.com/">W3layouts</a></p>
					<script type="text/javascript">
							$(document).ready(function() {
								/*
								var defaults = {
						  			containerID: 'toTop', // fading element id
									containerHoverID: 'toTopHover', // fading element hover id
									scrollSpeed: 1200,
									easingType: 'linear' 
						 		};
								*/
								
								$().UItoTop({ easingType: 'easeOutQuart' });
								
							});
						</script>
   					 <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
				</div>
				<div class="clear"> </div>
			</div>
		</div>
		<!---End-footer----->
		<!---End-wrap---->
		
	</body>
</html>

